<template>
    <div class="home1">
        <div class="topBox">
            <div></div>
            <div>饿了么</div>
            <div class="topRight">
                <van-icon name="weapp-nav" />
                <span>|</span>
                <van-icon name="clear" />
            </div>
        </div>
        <van-tabs v-model="active" background="#f4f5f4" >
            <van-tab title="全部">
                <div class="list">
                    <div class="listBox">
                        <div class="name">
                            <div><span>名字</span></div>
                            <div>状态</div>
                        </div>
                        <div class="png">
                            图片
                        </div>
                        <div class="order">再来一单</div>
                    </div>
                </div>
            </van-tab>
            <van-tab title="待消费">
                待消费
            </van-tab>
            <van-tab title="待评价">
                待评价
            </van-tab>
            <van-tab title="退款">
                退款
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
export default {
    data() {
        return{
            active: 0,
        }
    },
}
</script>

<style lang="scss" scoped>
.home1{
    width: 100%;
    background-color: #f4f5f4;
    overflow: hidden;
    .topBox{
        width: 95%;
        margin:25px  2.5%;
        display: flex;
        justify-content: space-between;
    }
    .list{
        background-color: white;
        width: 95%;
        margin: 25px 2.5%;
        border-radius: 10px;
        .listBox{
            padding: 10px;
            .name{
                display: flex;
                justify-content: space-between;
            }
            .order {
                display: flex;
                justify-content: right;
            }
        }
    }
}
</style>